<!doctype html>
<html>
    <head>
        <meta charset="utf-8">

        <title>InkJS - TreeView samples</title>

        <link rel="stylesheet" href="../../../../../../dist/css/ink.css">

        <script type="text/javascript" src="../../../../Ink/1/lib.js"></script>
        <script>
            Ink.setPath('Ink', '../../../../Ink/');
        </script>
        <script type="text/javascript" src="../../../../../../dist/js/prettify.js"></script>
        <style>
            pre.prettyprint{
                font-size: 0.75em;
            }
        </style>
    </head>

    <body onload="prettyPrint()">
        <nav class="ink-navigation ink-container">
            <ul class="menu horizontal black flat">
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
            </ul>
        </nav>
        <div class="ink-container ink-grid">
            <h1>TreeView Samples - InkJS</h1>

            <section>
                <header>
                    <h2>TreeView #1 - Default Markup</h2>
                </header>

                <p>A TreeView is built with "node"s and "children". "node"s are <code>&lt;li&gt;</code> tags, and "children" are <code>&lt;ul&gt;</code> tags.</p>

                <p>You can build your TreeView out of a regular UL and LI element structure which you already use to display lists with several levels.</p>

                <p>If you want a node (LI) to be open when the TreeView is built, just add the <code>data-open="true"</code> attribute to it.</p>

                <ul class="ink-tree-view">
                    <li data-open="true">
                        <a href="#">root</a>
                        <ul>
                            <li>
                                <a href="#">child 1</a>
                            </li>
                            <li>
                                <a href="#">child 2</a>
                                <ul>
                                    <li><a href="#">grandchild 2a</a></li>
                                    <li>
                                        <a href="#">grandchild 2b</a>
                                        <ul>
                                            <li>
                                                <a href="#">grandgrandchild 1bA</a>
                                            </li>
                                            <li>
                                                <a href="#">grandgrandchild 1bB</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#">child 3</a></li>
                        </ul>
                    </li>
                </ul>
                <p>
                    <pre class="prettyprint linenums">
                    </pre>
                </p>
            </section>

            <section>
                <header>
                    <h2>TreeView #2 - Different Markup... Same behavior</h2>
                </header>
                <p>By using the <code>children</code> and <code>node</code> options, you can choose what is a "node" and what is a "children". This way you are not limited to using <code>ul</code>s and <code>li</code>s</p>
                <div class="ink-tree-view" data-children=".children" data-node=".node">
                    <div data-open="true" class="node">
                        <a href="#">root</a>
                        <div class="children">
                            <div class="node">
                                <a href="#">child 1</a>
                            </div>
                            <div class="node">
                                <a href="#">child 2</a>
                                <div class="children">
                                    <div class="node"><a href="#">grandchild 2a</a></div>
                                    <div class="node">
                                        <a href="#">grandchild 2b</a>
                                        <div class="children">
                                            <div class="node">
                                                <a href="#">grandgrandchild 1bA</a>
                                            </div>
                                            <div class="node">
                                                <a href="#">grandgrandchild 1bB</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="node"><a href="#">child 3</a></div>
                        </div>
                    </div>
                </div>
                <p>
                    <pre class="prettyprint linenums"></pre>
                </p>
            </section>
        </div>
        <script>
            Ink.requireModules(['Ink.Util.Array_1','Ink.UI.TreeView_1'], function(InkArray, TreeView) {
                InkArray.each(Ink.ss('.ink-tree-view'),function(item){
                    var treeView = new TreeView(item);
                });
            });
        </script>
    </body>
</html>
